<script setup lang="ts">
    import { ContentWrap } from '@/components/ContentWrap'
    import { Search } from '@/components/Search'
    import { useI18n } from '@/hooks/web/useI18n'
    import { ElButton, ElTag } from 'element-plus'
    import { Table } from '@/components/Table'
    import {delTableListApi,getcouponApi } from '@/api/table'
    import { useTable } from '@/views/Example/Page/useTable'
    import { ChaeCoupon } from '@/api/table/types'
    import { h, reactive, ref } from 'vue'
    import { useRouter } from 'vue-router'
    import { useEmitt } from '@/hooks/web/useEmitt'
    import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
    import { TableColumn } from '@/types/table'

    defineOptions({
        name: 'ExamplePage'
    })

    const { push } = useRouter()

    const { register, tableObject, methods } = useTable<ChaeCoupon>({
        getListApi: getcouponApi,
        delListApi: delTableListApi,
        response: {
            list: 'list',
            total: 'total'
        }
    })

    const { getList, setSearchParams } = methods

    getList()

    useEmitt({
        name: 'getList',
        callback: (type: string) => {
            if (type === 'add') {
                tableObject.currentPage = 1
            }
            getList()
        }
    })

    const { t } = useI18n()

    const crudSchemas = reactive<CrudSchema[]>([
        {
            field: 'user_id',
            label: t('viewDemo.userID'),
        },
        {
            field: 'account',
            label: t('viewDemo.userAccound'),
            search: {
                show: true
            }
        },
        {
            field: 'nickname',
            label: t('viewDemo.user_name')
        },
        {
            field: 'used',
            label: t('viewDemo.us'),
            sortable: true
        },
        {
            field: 'notUsed',
            label: t('viewDemo.weius'),
        },
        {
            field: 'expired',
            label: t('viewDemo.weiqi')
        },
        {
            field: 'action',
            label: t('tableDemo.action')
        }
    ])

    const { allSchemas } = useCrudSchemas(crudSchemas)

    const AddAction = () => {
        push('/example/example-add')
    }

    const delLoading = ref(false)

    const delData = async (row: ChaeCoupon | null, multiple: boolean) => {
        tableObject.currentRow = row
        const { delList, getSelections } = methods
        const selections = await getSelections()
        delLoading.value = true
        await delList(
            multiple ? selections.map((v) => v.id) : [tableObject.currentRow?.id as string],
            multiple
        ).finally(() => {
            delLoading.value = false
        })
    }

    const action = (row: ChaeCoupon, type: string) => {
        //push(`/example/example-${type}?user_id=${row.user_id}`)
        push(`/example/example-${type}?user_id=${row.user_id}`)
    }
</script>

<template>
    <ContentWrap>
        <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
        <Table
                v-model:pageSize="tableObject.pageSize"
                v-model:currentPage="tableObject.currentPage"
                :columns="allSchemas.tableColumns"
                :data="tableObject.tableList.slice(
            (tableObject.currentPage - 1) * tableObject.pageSize,
             tableObject.currentPage * tableObject.pageSize)"
                :loading="tableObject.loading"
                :pagination="{
        total: tableObject.total
      }"
                @register="register"
        >
            <template #action="{ row }">
                <ElButton type="success" @click="action(row, 'detail')">
                    {{ t('viewDemo.song') }}
                </ElButton>
            </template>
        </Table>
    </ContentWrap>
</template>